import { createApp } from 'vue'
import 'normalize.css'
import App from './App.vue'
import {
  Button,
  Divider,
  Menu,
  Layout,
  Form,
  Input,
  Card,
  Table,
  Pagination,
  ConfigProvider,
  Modal,
  DatePicker,
  Select,
  SelectOption,
  Tree,
  Switch,
  Tabs,
  Row,
  Col,
  Checkbox
} from 'ant-design-vue'
// import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import '@/styles/index.less'

import * as Icons from '@ant-design/icons-vue'
import router from './router'
import { createPinia } from 'pinia'
// 导入全局路由配置
import '@/router/permission'
// 导入 svgIcon
import svgIcon from '@/components/SvgIcon/index.vue'
// 导入pinia持久化插件
import piniaPersist from 'pinia-plugin-persist'
// 导入自定义指令
import directive from './directive'
// 图片懒加载
import VueLazyLoad from 'vue-lazyload'

// 实例化vue
const app = createApp(App)
app.use(VueLazyLoad, {
  preLoad: 1,
  error: './assets/img/error.jpg',
  loading: './assets/img/homePage_top.jpg',
  attempt: 2
})
// svg组件挂载到vue上
app.component('svg-icon', svgIcon)
// 实例pinia
const pinia = createPinia()
// 挂载pinia
app.use(pinia)
// 挂载pinia持久化插件
pinia.use(piniaPersist)
// 挂载为全局自定义指令
app.use(directive)

// 挂载路由
app.use(router)
// 挂载ant组件
app
  .use(Button)
  .use(Divider)
  .use(Menu)
  .use(Layout)
  .use(Form)
  .use(Input)
  .use(Card)
  .use(Table)
  .use(Pagination)
  .use(ConfigProvider)
  .use(Modal)
  .use(DatePicker)
  .use(Select)
  .use(SelectOption)
  .use(Tree)
  .use(Switch)
  .use(Tabs)
  .use(Row)
  .use(Col)
  // .use(CheckboxGroup)
  .use(Checkbox)
// .use(message)
// app.use(Antd)
// 把vue挂载到#app的div上
app.mount('#app')
// 读取环境变量,vite不同与webpack
// console.log(import.meta.env.APP_BASE_API)
// console.log(import.meta.env)
// console.log(import.meta.env['VITE_BASE_API'])
// console.log(import.meta.env.BASE_URL)
// 注册ant-icon组件
const icons: any = Icons
for (const i in Icons) {
  app.component(i, icons[i])
}
